<template>
  <div>
    <el-dialog
      :close-on-click-modal="false"
      :beforeClose="handleClose"
      title="地图选点"
      :visible.sync="dialogVisible"
      width="800px">
      <div class="map-chart">
        <div id="myPageTop">
          <input id="tipinput" ref="tipinput" autocomplete="off" placeholder="请输入搜索关键字" v-model="adrText" />
        </div>
        <div id="container" ref="container" />
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="handleConfirm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>


export default {
  name: "gaodeMap",
  data(){

    return {
      dialogVisible: false,
      btnLoading: false,
      placeSearch: null,
      geocoder:null,
      adrText:'',
      Lng:'',
      Lat:'',
      province:'',
      city:'',
      district:'',
    }
  },
  computed: {

  },
  created() {

  },
  methods:{
    //显示地图
    showMap(addresstext,addressDetail) {
      this.dialogVisible = true;
      let ssq = addresstext ? addresstext : '';
      let detail = addressDetail ? addressDetail : '';
      this.adrText = ssq +detail;
      if(addresstext){
        let adrArray = addresstext.split("_");
        this.province = adrArray[0]
        this.city = adrArray[1]
        this.district = adrArray[2]
      }
      setTimeout(()=>{
        this.mapInit()
      },500)
    },

    mapInit() {
        const _this = this
        // 创建Map实例
        const map = new AMap.Map(this.$refs.container, {
          resizeEnable: true,
        })
        AMap.plugin('AMap.Geocoder', function() {
          _this.geocoder = new AMap.Geocoder()
        })
        _this.geocoder.getLocation(_this.adrText, function(status, result) {
          if (status === 'complete' && result.info === 'OK') { //有地址，定位到地址
            let lnglat = [result['geocodes'][0]['location']['lng'],result['geocodes'][0]['location']['lat']];
            _this.Lng = result['geocodes'][0]['location']['lng'];
            _this.Lat = result['geocodes'][0]['location']['lat'];
            map.setZoomAndCenter(19,lnglat);
            new AMap.Marker({
              position: lnglat,
              icon:'https://pic.moresu.com/FrBjr2kg0Hhmohh37AbEud0Gd2ra',
              map: map
            })
          }else{ //无地址，自动定位
            const options = {
              'showButton': true, // 是否显示定位按钮
              'buttonPosition': 'LB', // 定位按钮的位置
              'buttonOffset': new AMap.Pixel(10, 20), // 定位按钮距离对应角落的距离
              'showMarker': true, // 是否显示定位点
              'showCircle': true, // 是否显示定位精度圈
              'circleOptions': {// 定位精度圈的样式
                'strokeColor': '#0093FF',
                'noSelect': true,
                'strokeOpacity': 0.5,
                'strokeWeight': 1,
                'fillColor': '#e41313',
                'fillOpacity': 0.25
              },
              zoomToAccuracy: true // 定位成功后是否自动调整地图视野到定位点
            }
            AMap.plugin(['AMap.Geolocation'], function () {
              const geolocation = new AMap.Geolocation(options)
              map.addControl(geolocation)
              geolocation.getCurrentPosition()
            })
          }
        })


        AMap.event.addListener(map, 'click', function (e) {
          map.clearMap() // 清除地图上所有添加的覆盖物
          new AMap.Marker({
            position: e.lnglat,
            icon:'https://pic.moresu.com/FrBjr2kg0Hhmohh37AbEud0Gd2ra',
            map: map
          })
          _this.handleMap(e.lnglat.getLng(), e.lnglat.getLat())
        })


        //输入提示
        var autoOptions = {
          input: this.$refs.tipinput
        };
        var auto = new AMap.Autocomplete(autoOptions);
        this.placeSearch = new AMap.PlaceSearch({
          map: map
        });  //构造地点查询类
        AMap.event.addListener(auto, 'select', this.select)// 注册监听，当选中某条记录时会触发
        AMap.event.addListener(this.placeSearch, 'markerClick', function (e) {
          _this.handleMap( e.data.location.lng, e.data.location.lat)
        })
      },
      select(e) {
        this.placeSearch.setCity(e.poi.adcode)
        this.placeSearch.search(e.poi.name) // 关键字查询查询
      },

      handleMap(o, a) {
        let lnglat = [o, a];
        let _this = this;
        this.geocoder.getAddress(lnglat, function(status, result) {
          if (status === 'complete' && result.info === 'OK') {
            console.log("result12312",result)
            _this.adrText = result.regeocode.formattedAddress;
            _this.province = result.regeocode.addressComponent.province;
            _this.city = result.regeocode.addressComponent.city;
            _this.district = result.regeocode.addressComponent.district;
            _this.Lng = o;
            _this.Lat = a;
            console.log(_this.Lng,_this.Lat)
            // result为对应的地理位置详细信息
          }else{
            this.$message({
              type: 'error',
              message: '获取地区信息失败'
            });
          }
        })
      },

      handleClose(){
        this.dialogVisible = false;
      },

      handleConfirm(){
        this.dialogVisible = false;
        let adrInfo = {
          adrText : this.adrText,
          Lng : this.Lng,
          Lat :this.Lat,
          province:this.province,
          city:this.city,
          district:this.district,
        }
        this.$emit('handleConfirm',adrInfo)
      },

  },
}
</script>

<style scoped lang="scss">
    .map-chart{
      position: relative;
      width: 100%;
    }
    /deep/ .amap-logo,/deep/ .amap-copyright {
      display: none!important;
    }

    #container {
      width: 100%;
      height: 400px;
      z-index: 99999999;
    }

    .button-group {
      position: absolute;
      bottom: 20px;
      right: 20px;
      font-size: 12px;
      padding: 10px;
    }

    .button-group .button {
      height: 28px;
      line-height: 28px;
      background-color: #0D9BF2;
      color: #FFF;
      border: 0;
      outline: none;
      padding-left: 5px;
      padding-right: 5px;
      border-radius: 3px;
      margin-bottom: 4px;
      cursor: pointer;
    }
    .button-group .inputtext {
      height: 26px;
      line-height: 26px;
      border: 1px;
      outline: none;
      padding-left: 5px;
      padding-right: 5px;
      border-radius: 3px;
      margin-bottom: 4px;
      cursor: pointer;
    }
    #tip {
      background-color: #fff;
      padding-left: 10px;
      padding-right: 10px;
      position: absolute;
      font-size: 12px;
      right: 10px;
      top: 20px;
      border-radius: 3px;
      border: 1px solid #ccc;
      line-height: 30px;
    }
    .amap-info-content {
      font-size: 12px;
    }

    #myPageTop{
      margin-bottom:20px;
      #tipinput{
        border-radius: 4px;
        border: 1px solid #DCDFE6;
        height:36px;
        line-height: 36px;
        padding:0 15px;
        width:100%
      }
      #tipinput:focus {
        border-color: #409EFF;
        outline: 0;
      }
    }
</style>
